import { useState } from "react";
import {
  Menu,
  MenuItem,
  ProductItem,
  HoveredLink,
} from "../components/ui/navbar-menu";
import { cn } from "../lib/utils";
import {
  IconHelp,
  IconLogin,
  IconRegistered,
  IconStars,
} from "@tabler/icons-react";
import { Divider } from "@heroui/react";
import { useNavigate } from "react-router-dom";
export default function NavBar({ className }) {
  const navigate = useNavigate();
  const [active, setActive] = useState(null);
  return (
    <div
      className={cn("fixed top-10 inset-x-0 max-w-2xl mx-auto z-50", className)}
    >
      <Menu setActive={setActive}>
        <MenuItem setActive={setActive} active={active} item={"开始"}>
          <div className="flex flex-col space-y-4 text-sm">
            <HoveredLink href="/login">
              {" "}
              <div className="flex justify-center md:w-[100px] sm:w-[100px] lg:w-[150px]">
                <IconLogin className="mr-4"></IconLogin>
                <span>登 录</span>
              </div>
            </HoveredLink>
            <Divider></Divider>
            <HoveredLink href="/register">
              <div className="flex justify-center md:w-[100px] sm:w-[100px] lg:w-[150px]">
                <IconRegistered className="mr-4"></IconRegistered>注 册
              </div>
            </HoveredLink>
          </div>
        </MenuItem>
        {/* <MenuItem setActive={setActive} active={active} item="Products">
          <div className="  text-sm grid grid-cols-2 gap-10 p-4">
            <ProductItem
              title="Algochurn"
              href="https://algochurn.com"
              src="https://assets.aceternity.com/demos/algochurn.webp"
              description="Prepare for tech interviews like never before."
            />
            <ProductItem
              title="Tailwind Master Kit"
              href="https://tailwindmasterkit.com"
              src="https://assets.aceternity.com/demos/tailwindmasterkit.webp"
              description="Production ready Tailwind css components for your next project"
            />
            <ProductItem
              title="Moonbeam"
              href="https://gomoonbeam.com"
              src="https://assets.aceternity.com/demos/Screenshot+2024-02-21+at+11.51.31%E2%80%AFPM.png"
              description="Never write from scratch again. Go from idea to blog in minutes."
            />
            <ProductItem
              title="Rogue"
              href="https://userogue.com"
              src="https://assets.aceternity.com/demos/Screenshot+2024-02-21+at+11.47.07%E2%80%AFPM.png"
              description="Respond to government RFPs, RFIs and RFQs 10x faster using AI"
            />
          </div>
        </MenuItem> */}
        <MenuItem setActive={setActive} active={active} item="帮助">
          <div className="flex flex-col space-y-4 text-sm">
            <HoveredLink href="/hobby">
              {" "}
              <div className="flex justify-center lg:w-[150px]">
                <IconHelp className="mr-4"></IconHelp>
                关于我们
              </div>
            </HoveredLink>
          </div>
        </MenuItem>
      </Menu>
    </div>
  );
}
